<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css?v=2020031412" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<title></title>
		<style>



		</style>

	</head>

	<body>


		<header class="sui-bar sui-bar-nav top-box" style="height: 85px;box-shadow: 0px 2px 1px rgba(0,0,0,0.5)">
			<div class="sui-title" style="height: 85px; line-height: 85px;">智慧水务系统</div>
			<div class="sui-pull-right" id="sui-back">
				<img src="img/menu.png" id="icon-menu" />
			</div>
		</header>


		<div class="sui-wrap back-box " id="datas" style="height: 100vh;" v-cloak>
			<p class="top-info animated fadeInDown" style="top:3rem">数据详情</p>

			<div class="sui-flex-col" style="width: 100%;height: 96%;overflow-y: auto;">
				<div class="sui-flex-col sui-flex-between" style="margin: 4rem 1rem 1rem 1rem;width: 100%;">
					<div class="list-box" style="width: 23%;" v-for="detail in detailList">
						<h1 class="list-title">{{detail.name}}</h1>
						
						<div v-for="target in   detail.targets"  >
							<span style="color: #999999;">{{target.name}}：</span>
							<p style="color: #EEEEEE;padding-left: 1rem;" v-text="getInfo(target)"></p>
							
						</div>
						
						
						
						
						
						
						
					</div>

				</div>

			</div>



		</div>



		</div>

		<script type="application/javascript" src="lib/sui.js"></script>
		<script type="application/javascript" src="lib/vue.min.js"></script>
		<script type="application/javascript" src="js/common.js"></script>
		<script type="application/javascript" src="js/api.js"></script>



		<script type="text/javascript">
			var vm = new Vue({
				el: "#datas",
				data: {
					detailList: []
				},
				mounted: function() {
					this.loadDevice();
				},
				methods: {
					//获取详细信息
					loadDevice: function() {
						var _self = this;

						try {
							jsObjAsync.loadDevice().then(function(data) {
								_self.detailList = data.Data;
							});
						} catch (e) {
							apiManage.get("./bak/data.json", null, function(ret) {
								//console.log(JSON.stringify(ret));
								_self.detailList = ret.Data;	
							}, function(err) {});
						}
					},
					
					getInfo:function(target){
						return  target.value + "　" + target.unit
					}



				}


			});
		</script>

	</body>

</html>
